<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>故宫</title>
    <link rel="stylesheet" href="./css/mystyle.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <script src="./js/jquery-2.1.1.min.js"></script>
    <script src="./js/myscript.js"></script>
    <script src="./js/swiper.min.js"></script>
    <script src="./js/showwrap-script.js"></script>
</head>

<body>
    <!-- 导航 -->
    <div class="Navigation">
        <div class="title">
            <h1>故宫博物馆</h1>
        </div>

        <div class="menu">
            <ul class="menu-header">
                <li><a class="menu-first" href="#">Home</a></li>
                <li><a class="menu-first" href="#">导览</a>
                    <ul class="menu_hide">
                        <li><a href="">开放时间</a></li>
                        <li><a href="">票务服务</a></li>
                        <li><a href="">交通路线</a></li>
                        <li><a href="">游览须知</a></li>
                        <li><a href="">全景故宫</a></li>
                    </ul>
                </li>
                <li><a class="menu-first" href="#">文创</a>
                    <ul class="menu_hide">
                        <li><a href="">故宫出版</a></li>
                        <li><a href="">文创产品</a></li>
                        <li><a href="">故宫壁纸</a></li>
                        <li><a href="">故宫APP</a></li>
                        <li><a href="">故宫游戏</a></li>
                    </ul>
                </li>
                <li><a class="menu-first" href="#">学术</a>
                    <ul class="menu_hide">
                        <li><a href="">学术资讯</a></li>
                        <li><a href="">专家名录</a></li>
                        <li><a href="">故宫研究院</a></li>
                        <li><a href="">故宫学院</a></li>
                        <li><a href="">其他学术机构</a></li>
                    </ul>
                </li>
                <li><a class="menu-first" href="#">探索</a>
                    <ul class="menu_hide">
                        <li><a href="">宫廷历史</a></li>
                        <li><a href="">文物医院</a></li>
                        <li><a href="">文化专题</a></li>
                        <li><a href="">名画记</a></li>
                        <li><a href="">数字文物库</a></li>
                    </ul>
                </li>
                <li><a class="menu-first" href="./second.html">进入第二页面</a></li>
            </ul>
        </div>
    </div>

    <!-- banner -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="swiper-slide-title" data-swiper-parallax="-130%">
                    <h3>紫禁城</h3>
                </div>
                <div class="img-box"><img src="./img/爱上紫禁城.jpg" style="transform:translateX(0);"></div>
            </div>
            <div class="swiper-slide">
                <div class="swiper-slide-title" data-swiper-parallax="-130%">
                    <h3>爱上这座城</h3>
                </div>
                <div class="img-box"><img src="./img/爱上这座城.jpg"></div>
            </div>
            <div class="swiper-slide">
                <div class="swiper-slide-title" data-swiper-parallax="-130%">
                    <h3>冬景山水图轴</h3>
                </div>
                <div class="img-box"><img src="./img/清  袁耀冬景山水图轴.jpg"></div>
            </div>
        </div>
        <div class="button-prev button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 350 160 90">
                <g id="arrow-svg-home">
                    <g id="circ" class="cls-1">
                        <circle cx="42" cy="42" r="40" class="cls-4"></circle>
                    </g>
                    <g id="arrow">
                        <path id="arrow-trg" d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z"></path>
                    </g>
                    <path id="line" d="M120,0H0" class="cls-3"></path>
                </g>
            </svg>
        </div>
        <!--左箭头-->
        <div class="button-next button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 350 160 90">
                <g id="arrow-svg-home">
                    <g id="circ" class="cls-1">
                        <circle cx="42" cy="42" r="40" class="cls-4"></circle>
                    </g>
                    <g id="arrow">
                        <path id="arrow-trg" d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z"
                            class="cls-2"></path>
                    </g>
                    <path id="line" d="M120,0H0" class="cls-3"></path>
                </g>
            </svg>
        </div>
        <!--右箭头-->
    </div>

    <div class="more-content">
        <h3>故宫博物院公布：“纪念紫禁城建成600年暨故宫博物院成立95周年”重点活动</h3>
        <div class="content-span">
            <span>2020年是紫禁城建成600年，又是故宫博物院成立95周年，这是全社会的一件文化盛事。
                故宫博物院将以传承弘扬中华优秀传统文化为使命，</span><br />
            <span> 努力推动故宫世界文化遗产的保护研究传承，推动中华优秀传统文化的创新发展。</span>
        </div>

        <button class="btn">了解更多</button>
    </div>

    <div class="collection">
        <img style="width: 1330px;height: 458px;" src="./img/藏品.jpg">
        <div class="collection-text">
            <span><img style="width: 22px; height: 32px;vertical-align:text-bottom;" src="./img/藏品-icon1.png"></span>
            <span class="cl-title">数以百万计的珍贵藏品鉴赏</span>
            <span><img style="width: 22px; height: 32px;vertical-align:text-bottom;" src="./img/藏品-icon2.png"></span>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“故宫博物院”既是明清故宫（紫禁城）建筑群与宫廷史迹的保护管理机构，也是以
                明清皇室旧藏文物为基础的中国古代文化艺术品的收藏、研究和展示机构。“故宫
                博物院”院藏文物体系完备、涵盖古今、品质精良、品类丰富。现有藏品总量已达
                180余万件（套），以明清宫廷文物类藏品、古建类藏品、图书类藏品为主。藏品
                总分25种大类别，其中一级藏品8000余件（套），堪称艺术的宝库。</p>

            <button class="btn">数字文物馆</button>
        </div>


    </div>

    <div class="wrap">
        <div class="tile">
            <div class="text">
                <h1>嫦娥玉兔菱花镜</h1>
                <img src="./img/嫦娥玉兔菱花镜.jpg">
                <h2 class="animate-text">嫦娥玉兔菱花镜，唐，直径19.1厘米。</h2>
                <p class="animate-text">镜为八瓣菱花形，伏兽钮。铜镜背面是一幅月宫图。
                    钮右上方饰一株桂树,枝繁叶茂；嫦娥身姿飘逸，一手托盘，一手托幅，上
                    有“大吉”二字。镜钮下方有一潭池水，左侧玉兔正持杵捣药，池水右边为一
                    跳跃的蟾蜍。</p>
                <div class="dots"> <span></span> <span></span> <span></span> </div>
            </div>
        </div>

        <div class="tile">
            <div class="text">
                <h1>宜兴窑紫砂双螭福寿水丞</h1>
                <img src="./img/宜兴窑紫砂双螭福寿水丞.jpg">
                <h2 class="animate-text">宜兴窑紫砂双螭福寿水丞，清乾隆</h2>
                <p class="animate-text">水丞圆唇口，扁腹，两对螭龙托珠为座。砂泥呈黄色，
                    质地极为细润。外口下有回纹和云头纹边饰各一周。器身堆绘绿泥五蝠及双“寿”
                    字，寓意“五福捧寿”。此器造型精巧华丽，为紫砂文玩中的佳品。 </p>
                <div class="dots"> <span></span> <span></span> <span></span> </div>
            </div>
        </div>

        <div class="tile">
            <div class="text">
                <h1>黄地粉彩蝴蝶纹奓斗</h1>
                <img src="./img/黄地粉彩蝴蝶纹奓斗.jpg">
                <h2 class="animate-text">黄地粉彩蝴蝶纹奓斗，清同治</h2>
                <p class="animate-text">奓斗敞口，圆腹，圈足。造型小巧秀丽。内施白釉，外
                    以黄釉为地，彩绘各种蝴蝶纹饰。奓斗是宫廷宴席桌上盛装骨刺的用具。以蝴蝶
                    作为吉祥图案，除色彩斑斓外，也在于“蝶”与“耋”的谐音。</p>
                <div class="dots"> <span></span> <span></span> <span></span> </div>
            </div>
        </div>

        <div class="tile">
            <div class="text">
                <h1>银鎏金嵌珐琅砚盒</h1>
                <img src="./img/银鎏金嵌珐琅砚盒.jpg">
                <h2 class="animate-text">银鎏金嵌珐琅砚盒，长27.2厘米，宽22.1厘米，高22.5厘米。</h2>
                <p class="animate-text">盒银质，长方形，有盖，下有如意式小足8个，底部中央錾篆
                    书“大清乾隆年制”六字款。通体錾花鎏金，并嵌烧蓝装饰。盒盖面錾刻缠枝花卉，中央
                    嵌一银圆片，其上以烧蓝云龙戏珠纹装饰。</p>
                <div class="dots"> <span></span> <span></span> <span></span> </div>
            </div>
        </div>

        <div class="tile">
            <div class="text">
                <h1>白玉盘龙纽“皇帝尊亲之宝”</h1>
                <img src="./img/白玉盘龙纽“皇帝尊亲之宝”.jpg">
                <h2 class="animate-text">皇帝尊亲之宝”，清早期，白玉质，盘龙纽方形玺，汉文篆书满文篆书。</h2>
                <p class="animate-text">乾隆帝钦定二十五宝之一，据《交泰殿宝谱》，用此宝“以荐徽号”，主要
                    是为前朝后妃上徽号或尊号时钤用。 </p>
                <div class="dots"> <span></span> <span></span> <span></span> </div>
            </div>
        </div>

        <div class="tile">
            <div class="text">
                <h1>黑漆描金百寿字碗</h1>
                <img src="./img/黑漆描金百寿字碗.jpg">
                <h2 class="animate-text">黑漆描金百寿字碗，清雍正</h2>
                <p class="animate-text">碗圆形，撇口，圈足。器身内外在黑漆地上饰描金花纹。外壁满绘异
                    体“寿”字百个，寿字沿碗壁纵横排列，字数自下而上依次为17、23、29、31个，相加恰为百寿。 </p>
                <div class="dots"> <span></span> <span></span> <span></span> </div>
            </div>
        </div>
    </div>
    </div>

    <div class="build">
        <img style="width: 1334px;height: 458px;" src="./img/建筑.jpg">
        <div class="build-text">
            <span><img style="width: 22px; height: 32px;vertical-align:text-bottom;" src="./img/藏品-icon1.png"></span>
            <span class="build-title">建筑</span>
            <span><img style="width: 22px; height: 32px;vertical-align:text-bottom;" src="./img/藏品-icon2.png"></span>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;紫禁城南北长961米，东西宽753米，四面围有高10米的城墙，城外有宽52米的
                护城河,真可谓有金城汤池之固。紫禁城有四座城门，南面为午门，北面为神武门，东面为东华门，西面为西华门。城墙的四角，各
                有一座风姿绰约的角楼，民间有九梁十八柱七十二条脊之说，形容其结构的复杂。紫禁城内的建筑分为外朝和内廷两部分。外朝的
                中心为太和殿、中和殿、保和殿，统称三大殿，是国家举行大典礼的地方。三大殿左右两翼辅以文华殿、武英殿两组建筑。内廷的
                中心是乾清宫、交泰殿、坤宁宫，统称后三宫，是皇帝和皇后居住的正宫。其后为御花园。后三宫两侧排列着东、西六宫，是后妃
                们居住休息的地方。东六宫东侧是天穹宝殿等佛堂建筑，西六宫西侧是中正殿等佛堂建筑。外朝、内廷之外还有外东路、外西路两
                部分建筑。</p>

            <button class="btn">走进故宫</button>

        </div>

    </div>

    <div class="show-wrap">
        <a href="#" class="hb">
            <div class="c">
                <img src="./img/午门.jpg">
                <div class="txt">
                    <h1>午门</h1>
                    <p>午门是紫禁城的正门，位于紫禁城南北轴线。
                        其前有端门、天安门（皇城正门，明代称承天门）、
                        大清门（明代称大明门），其后有太和门（明代称奉
                        天门，后改称皇极门，清代改今名）。各门之内，两侧
                        排列整齐的廊庑。这种以门庑围成广场、层层递进的布
                        局形式是受中国古代“五门三朝”制度的影响，有利于突
                        出皇宫建筑威严肃穆的特点。</p>
                </div>
            </div>
        </a>
        <div class="fullBg">
            <img src="./img/午门.jpg">
        </div>

        <a href="#" class="hb">
            <div class="c">
                <img src="./img/太和殿.jpg">
                <div class="txt">
                    <h1>太和殿</h1>
                    <p>太和殿，俗称“金銮殿”，位于紫禁城南北主轴线的显要位置，
                        明永乐十八年（1420年）建成，称奉天殿。嘉靖四十一年
                        （1562年）改称皇极殿。清顺治二年（1645年）改今名。
                        自建成后屡遭焚毁，又多次重建，今天所见为清代康熙三十
                        四年(1695年)重建后的形制。</p>
                </div>
            </div>
        </a>
        <div class="fullBg">
            <img src="./img/太和殿.jpg">
        </div>

        <a href="#" class="hb">
            <div class="c">
                <img src="./img/角楼.jpg">
                <div class="txt">
                    <h1>角楼</h1>
                    <p>紫禁城垣四隅之上的角楼，建成于明永乐十八年（1420年），清代重修。
                        角楼是紫禁城城池的一部分，它与城垣、城门楼及护城河同属于皇宫的防卫设施。</p>
                </div>
            </div>
        </a>
        <div class="fullBg">
            <img src="./img/角楼.jpg" alt="">
        </div>

        <a href="#" class="hb">
            <div class="c">
                <img src="./img/太和门.jpg" alt="">
                <div class="txt">
                    <h1>太和门</h1>
                    <p>太和门是紫禁城内最大的宫门，也是外朝宫殿的正门。太和门建成于明永乐十八年
                        （1420年），当时称奉天门。嘉靖四十一年（1562年）改称皇极门，清顺治二年
                        （1645年）改今名。顺治三年（1646年）、嘉庆七年（1802年）重修，光绪十四
                        年（1888年）被焚毁，次年重建。</p>
                </div>
            </div>
        </a>
        <div class="fullBg">
            <img src="./img/太和门.jpg" alt="">
        </div>
    </div>

    <div class="scrolllist">
        <ul class="scrolllist-slider">
            <li>
                <img class="img" src="./img/图书馆.jpg">

                <p>
                    <span>图书馆</span>
                    <a href="#"></a>
                    <i></i>
                </p>
            </li>
            <li>
                <img class="img" src="./img/视听馆.jpg">
                <p>
                    <span>视听馆</span>
                    <a href="#"></a>
                    <i></i>
                </p>
            </li>
            <li>
                <img class="img" src="./img/数字文物馆.jpg">
                <p>
                    <span>数字文物库</span>
                    <a href="#"></a>
                    <i></i>
                </p>
            </li>
            <li>
                <img class="img" src="./img/全景故宫.jpg">
                <p>
                    <span>全景故宫</span>
                    <a href="#"></a>
                    <i></i>
                </p>
            </li>
            <li>
                <img class="img" src="./img/数字文物馆.jpg">
                <p>
                    <span>V故宫</span>
                    <a href="#"></a>
                    <i></i>
                </p>
            </li>
        </ul>

        <div class="clearfix"></div>

    </div>

    <div class="back_top">
        <p>回到顶部</p>
    </div>

    <div class="footer">
        <div class="footer_content">
            <div class="footer_content_left">
                <img style="margin-bottom:10px;" src="./img/logo.png">
            </div>

            <div class="footer_content_right">
                <div class="content_right_text">
                    <ul style="list-style:none">
                        <h4 style="font-size:16px; color:#fff">网站建设</h4>
                        <li><a href="#">花辰月夕WJ</a></li>
                    </ul>
                </div>

                <div class="content_right_text">
                    <ul style="list-style:none">
                        <h4 style="font-size:16px; color:#fff">联系方式</h4>
                        <li><a href="#">新浪微博</a></li>
                        <li><a href="#">电子邮件</a></li>
                    </ul>
                </div>

                <div class="content_right_text">
                    <ul style="list-style:none">
                        <h4 style="font-size:16px; color:#fff">关于</h4>
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">广告合作</a></li>
                        <li><a href="#">友情链接</a></li>
                        <li><a href="#">招聘</a></li>
                    </ul>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>

        <div class="footer_content_bottom">
            <P style="font-size:13px; color:#fff">京ICP备11008151号 丨 京公网安备11010802014853</P>
        </div>
    </div>

    <!-- js -->
    <script>
        //banner js
        lock = false;
        bgColor = ["rgb(165,42,42)", "rgb(211,211,211)", "rgb(222,184,135)"];
        var mySwiper = new Swiper('.swiper-container', {
            speed: 1300,
            allowTouchMove: false,
            autoplay: {
                disableOnInteraction: false, //手动滑动之后不打断播放
                delay: 2000
            },
            parallax: true,
            on: {
                transitionStart: function () {
                    lock = true; //锁住按钮
                    slides = this.slides
                    imgBox = slides.eq(this.previousIndex).find('.img-box')
                    imgPrev = slides.eq(this.previousIndex).find('img')
                    imgActive = slides.eq(this.activeIndex).find('img')
                    derection = this.activeIndex - this.previousIndex
                    this.$el.css("background-color", bgColor[this.activeIndex]);

                    imgBox.transform('matrix(0.6, 0, 0, 0.6, 0, 0)');
                    imgPrev.transition(1000).transform('matrix(1.2, 0, 0, 1.2, 0, 0)');
                    this.slides.eq(this.previousIndex).find('h3').transition(1000).css('color',
                        'rgba(255,255,255,0)');

                    imgPrev.transitionEnd(function () {
                        imgActive.transition(1300).transform(
                            'translate3d(0, 0, 0) matrix(1.2, 0, 0, 1.2, 0, 0)');
                        imgPrev.transition(1300).transform('translate3d(' + 60 * derection +
                            '%, 0, 0)  matrix(1.2, 0, 0, 1.2, 0, 0)');
                    });
                },
                transitionEnd: function () {
                    this.slides.eq(this.activeIndex).find('.img-box').transform(
                        ' matrix(1, 0, 0, 1, 0, 0)');
                    imgActive = this.slides.eq(this.activeIndex).find('img')
                    imgActive.transition(1000).transform(' matrix(1, 0, 0, 1, 0, 0)');
                    this.slides.eq(this.activeIndex).find('h3').transition(1000).css('color',
                        'rgba(255,255,255,1)');

                    imgActive.transitionEnd(function () {
                        lock = false
                    });

                    if (this.activeIndex == 0) {
                        this.$el.find('.button-prev').addClass('disabled');
                    } else {
                        this.$el.find('.button-prev').removeClass('disabled');
                    }

                    if (this.activeIndex == this.slides.length - 1) {
                        this.$el.find('.button-next').addClass('disabled');
                    } else {
                        this.$el.find('.button-next').removeClass('disabled');
                    }
                },
                init: function () {
                    this.emit('transitionEnd');
                },

            }
        });


        mySwiper.$el.find('.button-next').on('click', function () {
            if (!lock) {
                mySwiper.slideNext();
            }
        })
        mySwiper.$el.find('.button-prev').on('click', function () {
            if (!lock) {
                mySwiper.slidePrev();
            }
        })



        // srcolllist js!!! 鼠标滑动方向
        // srcolllist js!!!
        // srcolllist js!!!
        // srcolllist js!!!
        // srcolllist js!!!
        $(".scrolllist-slider li").each(function () {
            $(this).on('mouseenter', function (e) {
                var e = e || window.event;
                var angle = direct(e, this)
                mouseEvent(angle, this, 'in')
            })
            $(this).on('mouseleave', function (e) {
                var e = e || window.event;
                var angle = direct(e, this)
                mouseEvent(angle, this, 'off')
            })
        })

        function direct(e, o) {
            var w = o.offsetWidth;
            var h = o.offsetHeight;
            var top = o.offsetTop;
            var left = o.offsetLeft;
            var scrollTOP = document.body.scrollTop || document.documentElement.scrollTop;
            var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
            var offTop = top - scrollTOP;
            var offLeft = left - scrollLeft;

            var ex = (e.pageX - scrollLeft) || e.clientX;
            var ey = (e.pageY - scrollTOP) || e.clientY;
            var x = (ex - offLeft - w / 2) * (w > h ? (h / w) : 1);
            var y = (ey - offTop - h / 2) * (h > w ? (w / h) : 1);

            var angle = (Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90) + 3) % 4
            var directName = ["上", "右", "下", "左"];
            return directName[angle];
        }

        function mouseEvent(angle, o, d) {
            var w = o.offsetWidth;
            var h = o.offsetHeight;

            if (d == 'in') {
                switch (angle) {
                    case '上':
                        $(o).find("p").css({
                            left: 0,
                            top: -h + "px"
                        }).stop(true).animate({
                            left: 0,
                            top: 0
                        }, 300)
                        setTimeout(function () {
                            $(o).find("p a").css({
                                left: '50%',
                                top: -h + "px"
                            }).stop(true).animate({
                                left: '50%',
                                top: '20px'
                            }, 300)
                        }, 200)
                        break;
                    case '右':
                        $(o).find("p").css({
                            left: w + "px",
                            top: 0
                        }).stop(true).animate({
                            left: 0,
                            top: 0
                        }, 300)
                        setTimeout(function () {
                            $(o).find("p a").css({
                                left: w + "px",
                                top: '20px'
                            }).stop(true).animate({
                                left: '50%',
                                top: '20px'
                            }, 300)
                        }, 200)
                        break;
                    case '下':
                        $(o).find("p").css({
                            left: 0,
                            top: h + "px"
                        }).stop(true).animate({
                            left: 0,
                            top: 0
                        }, 300)
                        setTimeout(function () {
                            $(o).find("p a").css({
                                left: '50%',
                                top: h + "px"
                            }).stop(true).animate({
                                left: '50%',
                                top: '20px'
                            }, 300)
                        }, 200)
                        break;
                    case '左':
                        $(o).find("p").css({
                            left: -w + "px",
                            top: 0
                        }).stop(true).animate({
                            left: 0,
                            top: 0
                        }, 300)
                        setTimeout(function () {
                            $(o).find("p a").css({
                                left: -w + "px",
                                top: '20px'
                            }).stop(true).animate({
                                left: '50%',
                                top: '20px'
                            }, 300)
                        }, 200)
                        break;
                }
            } else if (d == 'off') {
                switch (angle) {
                    case '上':
                        $(o).find("p a").stop(true).animate({
                            left: '50%',
                            top: -h + "px"
                        }, 300)
                        setTimeout(function () {
                            $(o).find("p").stop(true).animate({
                                left: 0,
                                top: -h + "px"
                            }, 300)
                        }, 200)
                        break;
                    case '右':
                        $(o).find("p a").stop(true).animate({
                            left: w + "px",
                            top: '20px'
                        }, 300)
                        setTimeout(function () {
                            $(o).find("p").stop(true).animate({
                                left: w + "px",
                                top: 0
                            }, 300)
                        }, 200)
                        break;
                    case '下':
                        $(o).find("p a").stop(true).animate({
                            left: '50%',
                            top: h + "px"
                        }, 300)
                        setTimeout(function () {
                            $(o).find("p").stop(true).animate({
                                left: 0,
                                top: h + "px"
                            }, 300)
                        }, 200)
                        break;
                    case '左':
                        $(o).find("p a").stop(true).animate({
                            left: -w + "px",
                            top: '20px'
                        }, 300)
                        setTimeout(function () {
                            $(o).find("p").stop(true).animate({
                                left: -w + "px",
                                top: 0
                            }, 300)
                        }, 200)
                        break;
                }
            }
        }
    </script>
</body>

</html>